<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="Keywords" content="">
    <style>
    *{margin:0;padding:0;}
    body{background-color: #000;}
    .pre{
        width: 50px; 
        height: 50px; 
        /*border: 1px solid red; */
        transform-style:preserve-3d;
        position: absolute;
        top: 55px;
        left: 25px;
        animation:play 15s infinite linear;
        perspective:200px; 
        /*transform:translateZ(23px);*/
     }
     .pre .ig{ 
        position: absolute;
        width: 50px;
        height: 50px;
     }
     .pre img{ 
        position: absolute;
        width: 40px;
        height: 50px;
     }
     @keyframes play{
        100%{transform:rotateX(360deg) rotateY(360deg) translateZ(23px);}
     }
     /*正上方*/
     .pre .ig:nth-child(1){
        transform:rotateX(90deg);
        top: -50px;
        transform-origin: bottom;
        background-color: red;
     }
     /*正下方*/
     .pre .ig:nth-child(2){
        transform:rotateX(-90deg);
        top: 50px;
        transform-origin: top;
        background-color: blue;
     }
     .pre .ig:nth-child(3){
        transform:rotateY(-90deg);
        left: -50px;
        transform-origin: right;
        background-color: yellow;
     }
     .pre .ig:nth-child(4){
        transform:rotateY(90deg);
        left: 50px;
        transform-origin: left;
        background-color: gray;
     }
     .pre .ig:nth-child(5){
        transform:rotateX();
        top: 0;
        left: 0;
        transform-origin: top;
        background-color: #fff;
     }
     .pre .ig:nth-child(6){
        transform: translateZ(-50px);
        top: 0;
        left: 0px;
        /*left: 100px;*/
        transform-origin:top;
        background-color: green;
     }
    .love{
        width: 100px;
        height: 160px;
        /*background-color:#fff; */
        /*margin:200px auto;*/
        transform-style:preserve-3d;
        position: fixed;
        top :200px;
        left: 50%;
        animation:playa 15s infinite linear;
    }
     @keyframes playa{
        100%{transform:rotateY(360deg) rotateX(360deg);; }
     }
    .love [class^="ax"]{
        width: 100px;
        height: 160px;
        border:solid red; 
        border-width:1px 1px 0 0 ;
        border-radius:50% 50% 0 / 40% 50% 0; 
        position: absolute;
    }
    .love [class$="1"]{
        transform:rotateY(10deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="2"]{
        transform:rotateY(20deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="3"]{
        transform:rotateY(30deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="4"]{
        transform:rotateY(40deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="5"]{
        transform:rotateY(50deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="6"]{
        transform:rotateY(60deg) rotateZ(45deg) translateX(30px);
    }.love [class$="7"]{
        transform:rotateY(70deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="8"]{
        transform:rotateY(80deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="9"]{
        transform:rotateY(90deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="10"]{
        transform:rotateY(100deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="11"]{
        transform:rotateY(110deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="12"]{
        transform:rotateY(120deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="13"]{
        transform:rotateY(130deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="14"]{
        transform:rotateY(140deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="15"]{
        transform:rotateY(150deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="16"]{
        transform:rotateY(160deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="17"]{
        transform:rotateY(170deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="18"]{
        transform:rotateY(180deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="19"]{
        transform:rotateY(190deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="20"]{
        transform:rotateY(200deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="21"]{
        transform:rotateY(210deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="22"]{
        transform:rotateY(220deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="23"]{
        transform:rotateY(230deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="24"]{
        transform:rotateY(240deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="25"]{
        transform:rotateY(250deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="26"]{
        transform:rotateY(260deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="27"]{
        transform:rotateY(270deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="28"]{
        transform:rotateY(280deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="29"]{
        transform:rotateY(290deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="30"]{
        transform:rotateY(300deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="31"]{
        transform:rotateY(310deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="32"]{
        transform:rotateY(320deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="33"]{
        transform:rotateY(330deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="34"]{
        transform:rotateY(340deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="35"]{
        transform:rotateY(350deg) rotateZ(45deg) translateX(30px);
    }
    .love [class$="36"]{
        transform:rotateY(360deg) rotateZ(45deg) translateX(30px);
    }
    </style>
</head>
<body>
    <canvas id="canvas" width="1600" height="800"></canvas>
    <audio src="雪.mp3" autoplay="" loop=""></audio>
    <div class="love">
        <div class="ax1"></div>
        <div class="ax2"></div>
        <div class="ax3"></div>
        <div class="ax4"></div>
        <div class="ax5"></div>
        <div class="ax6"></div>
        <div class="ax7"></div>
        <div class="ax8"></div>
        <div class="ax9"></div>
        <div class="ax10"></div>
        <div class="ax11"></div>
        <div class="ax12"></div>
        <div class="ax13"></div>
        <div class="ax14"></div>
        <div class="ax15"></div>
        <div class="ax16"></div>
        <div class="ax17"></div>
        <div class="ax18"></div>
        <div class="ax19"></div>
        <div class="ax20"></div>
        <div class="ax21"></div>
        <div class="ax22"></div>
        <div class="ax23"></div>
        <div class="ax24"></div>
        <div class="ax25"></div>
        <div class="ax26"></div>
        <div class="ax27"></div>
        <div class="ax28"></div>
        <div class="ax29"></div>
        <div class="ax30"></div>
        <div class="ax31"></div>
        <div class="ax32"></div>
        <div class="ax33"></div>
        <div class="ax34"></div>
        <div class="ax35"></div>
        <div class="ax36"></div>
        <div class="pre">
           <div class="ig">1<img src="images/1.jpg"></div>
           <div class="ig">2<img src="images/2.jpg"></div>
           <div class="ig">3<img src="images/3.jpg"></div>
           <div class="ig">4<img src="images/4.jpg"></div>
           <div class="ig">5<img src="images/5.jpg"></div>
           <div class="ig">6<img src="images/6.jpg"></div>
        </div>
    </div>
   
    <script>
        window.onload=function(){
            var canvas=document.getElementById('canvas');
            var cxt=canvas.getContext('2d');

            var W=window.innerWidth;
            var H=window.innerHeight;

            var str="我是2b我是个大笨蛋";
            var fontSize=14;

            var columns=Math.floor(W/fontSize);

            var drop = [];
                for(var x=0;x<columns;x++)
                {
                    drop[x]=0;
                }
            function draw(){
                cxt.fillStyle="rgba(0,0,0,0.07)";
                cxt.fillRect(0,0,W,H);
                cxt.fillStyle=randColor();
                cxt.font=fontSize+"px 微软雅黑";
                cxt.font = "700 "+fontSize+"px  微软雅黑";
                for(var i=0;i<columns;i++){
                    var index = Math.floor(Math.random() * str.length);
                    var x = i*fontSize;
                    var y = drop[i] *fontSize;
                    cxt.fillText(str[index],x,y);
                    //如果要改变时间，肯定就是改变每次他的起点
                    if(y >= H && Math.random() > 0.9){
                        drop[i] = 0;
                    }
                    drop[i]++;
                }
            }
            function randColor(){
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb("+r+","+g+","+b+")";
            }
            setInterval(draw,100);
        }
    </script>
</body>
</html>